<template>
  <div style="min-width: 809px">
    <!-- 页面底部有总金额，参考原型 -->
    <div>
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="日期">
            <el-date-picker
              @change="chageDate"
              value-format="yyyy-MM-dd"
              v-model="date"
              style="width: 250px"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button
              icon="el-icon-upload2"
              @click="exportFile()"
              :loading="isExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="groupWrap" v-loading="loading">
          <div class="firstColumn">
            <div class="left">
              <div class="summaryWrap">
                <div class="top">
                  <p>实际收入合计</p>
                  <h3>{{ tableData.actual_payable1 }}</h3>
                </div>
                <div class="bottom">
                  <p style="margin-bottom: 11px">劳动业绩</p>
                  <h3>{{ tableData.orders_payable1 }}</h3>
                </div>
              </div>
              <div class="listWrap">
                <div class="list">
                  <p>
                    <span style="width: 84px">微信扫码：</span>
                    <span>{{ tableData.wx }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">支付宝扫码：</span>
                    <span>{{ tableData.ali }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">大众点评：</span>
                    <span>{{ tableData.public }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">口碑收入：</span>
                    <span>{{ tableData.praise }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">正大无限卡：</span>
                    <span>{{ tableData.upright }}</span>
                  </p>
                </div>
              </div>
              <div class="listWrap">
                <div class="list">
                  <p>
                    <span style="width: 84px">其他：</span>
                    <span>{{ tableData.other }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">WOW收入：</span>
                    <span>{{ tableData.wow }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">小程序：</span>
                    <span>{{ tableData.applet }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">现金收入：</span>
                    <span>{{ tableData.cash }}</span>
                  </p>
                  <p>
                    <span style="width: 84px">银行卡收入：</span>
                    <span>{{ tableData.bank }}</span>
                  </p>
                </div>
              </div>
              <div class="listWrap">
                <div class="list">
                  <p>
                    <span>实体卡券消费：</span>
                    <span>{{ tableData.coupon_money }}</span>
                  </p>
                  <p>
                    <span>次卡金额：</span>
                    <span>{{ tableData.card }}</span>
                  </p>
                  <p>
                    <span>会员卡消费：</span>
                    <span>{{ tableData.balance }}</span>
                  </p>
                  <p>
                    <span>会员卡充值：</span>
                    <span>{{ tableData.total3 }}</span>
                  </p>
                  <!-- <p>
                    <span>预购实体卡券：</span>
                    <span>{{ tableData.entity }}</span>
                  </p>
                  <p>
                    <span>大众点评(团购)：</span>
                    <span>{{ tableData.group }}</span>
                  </p>
                  <p>
                    <span>大众点评(预定)：</span>
                    <span>{{ tableData.reserve }}</span>
                  </p> -->
                </div>
              </div>
            </div>
            <div class="right">
              <div class="listWrap">
                <p class="p1">总点钟数</p>
                <p class="p2">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/rank2x.png"
                    alt=""
                  />
                  <span>{{ tableData.spot }}</span>
                </p>
                <p class="p3">
                  <span>加班1点钟：</span>
                  <span>{{ tableData.spot_clock_number_one }}</span>
                </p>
                <p class="p4">
                  <span>加班2点钟：</span>
                  <span>{{ tableData.spot_clock_number_two }}</span>
                </p>
              </div>
              <div class="listWrap">
                <p class="p1">总轮钟数</p>
                <p class="p2">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/projects2x.png"
                    alt=""
                  />
                  <span>{{ tableData.upper }}</span>
                </p>
                <p class="p3">
                  <span>加班1轮钟：</span>
                  <span>{{ tableData.upper_clock_number_one }}</span>
                </p>
                <p class="p4">
                  <span>加班2轮钟：</span>
                  <span>{{ tableData.upper_clock_number_two }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="secondColumn">
            <div class="left">
              <div class="list">
                <p class="p1">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/2x8c42db511b64a3c1.png"
                    alt=""
                  />
                  <span>会员卡</span>
                </p>
                <p class="p2">{{ tableData.balance }}</p>
                <!-- <p class="p3" v-if="tableData.balanceData">
                  <span>会员卡项目：</span>
                  <span>{{ tableData.balanceData.project }}</span>
                </p>
                <p class="p3" v-if="tableData.balanceData">
                  <span>会员卡产品：</span>
                  <span>{{ tableData.balanceData.goods }}</span>
                </p> -->
                <p class="p3">
                  <span style="width: 72px">优惠金额：</span>
                  <span>{{ tableData.balance_cop }}</span>
                </p>
                <p class="p3">
                  <span style="width: 72px">退款金额：</span>
                  <span>{{ tableData.balance_return }}</span>
                </p>
                <!-- <p class="p4">
                  <span>余额外支付：</span>
                  <span>{{ tableData.balance_other }}</span>
                </p> -->
              </div>
              <div class="list">
                <p class="p1">
                  <img
                    style="width: 20px; height: 20px"
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/-2x.png"
                    alt=""
                  />
                  <span>支付宝</span>
                </p>
                <p class="p2">{{ tableData.ali }}</p>
                <!-- <p class="p3" v-if="tableData.aliData">
                  <span>支付宝项目：</span>
                  <span>{{ tableData.aliData.project }}</span>
                </p>
                <p class="p3" v-if="tableData.aliData">
                  <span>支付宝产品：</span>
                  <span>{{ tableData.aliData.goods }}</span>
                </p> -->
                <p class="p3">
                  <span>优惠金额：</span>
                  <span>{{ tableData.ali_cop }}</span>
                </p>
                <p class="p3">
                  <span>退款金额：</span>
                  <span>{{ tableData.ali_return }}</span>
                </p>
                <p class="p4" v-if="tableData.aliData">
                  <span>会员卡充值：</span>
                  <span>{{ tableData.aliData.user_price }}</span>
                </p>
              </div>
              <div class="list">
                <p class="p1">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/2x0feedaeb06e6c3a6.png"
                    alt=""
                  />
                  <span>微信</span>
                </p>
                <p class="p2">{{ tableData.wx }}</p>
                <!-- <p class="p3" v-if="tableData.wxData">
                  <span>微信项目：</span>
                  <span>{{ tableData.wxData.project }}</span>
                </p>
                <p class="p3" v-if="tableData.wxData">
                  <span>微信产品：</span>
                  <span>{{ tableData.wxData.goods }}</span>
                </p> -->
                <p class="p3">
                  <span>优惠金额：</span>
                  <span>{{ tableData.wx_cop }}</span>
                </p>
                <p class="p3">
                  <span>退款金额：</span>
                  <span>{{ tableData.wx_return }}</span>
                </p>
                <p class="p4" v-if="tableData.wxData">
                  <span>会员卡充值：</span>
                  <span>{{ tableData.wxData.user_price }}</span>
                </p>
              </div>
              <div class="list">
                <p class="p1">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/2xa349b0c1259e6541.png"
                    alt=""
                  />
                  <span>现金</span>
                </p>
                <p class="p2">{{ tableData.cash }}</p>
                <!-- <p class="p3" v-if="tableData.cashData">
                  <span>现金项目：</span>
                  <span>{{ tableData.cashData.project }}</span>
                </p>
                <p class="p3" v-if="tableData.cashData">
                  <span>现金产品：</span>
                  <span>{{ tableData.cashData.goods }}</span>
                </p> -->
                <p class="p3">
                  <span>优惠金额：</span>
                  <span>{{ tableData.cash_cop }}</span>
                </p>
                <p class="p3">
                  <span>退款金额：</span>
                  <span>{{ tableData.cash_return }}</span>
                </p>
                <p class="p4" v-if="tableData.cashData">
                  <span>会员卡充值：</span>
                  <span>{{ tableData.cashData.user_price }}</span>
                </p>
              </div>
            </div>
            <div class="right">
              <div class="list">
                <p class="p1">
                  <img
                    src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/11/29/2x.png"
                    alt=""
                  />
                  <span>银行卡</span>
                </p>
                <p class="p2">{{ tableData.bank }}</p>
                <!-- <p class="p3" v-if="tableData.bankData">
                  <span>银行卡项目：</span>
                  <span>{{ tableData.bankData.project }}</span>
                </p>
                <p class="p3" v-if="tableData.bankData">
                  <span>银行卡产品：</span>
                  <span>{{ tableData.bankData.goods }}</span>
                </p> -->
                <p class="p3">
                  <span>优惠金额：</span>
                  <span>{{ tableData.bank_cop }}</span>
                </p>
                <p class="p3">
                  <span>退款金额：</span>
                  <span>{{ tableData.bank_return }}</span>
                </p>
                <p class="p4" v-if="tableData.bankData">
                  <span>会员卡充值：</span>
                  <span>{{ tableData.bankData.user_price }}</span>
                </p>
              </div>
              <div class="list">
                <p class="p1">
                  <span>合计</span>
                </p>
                <p class="p2">{{ tableData.total6 }}</p>
                <!-- <p class="p3">
                  <span>小计：</span>
                  <span>{{ tableData.total1 }}</span>
                </p>
                <p class="p3">
                  <span>小计：</span>
                  <span>{{ tableData.total2 }}</span>
                </p> -->
                <p class="p3">
                  <span>小计：</span>
                  <span>{{ tableData.total4 }}</span>
                </p>
                <p class="p3">
                  <span>小计：</span>
                  <span>{{ tableData.total5 }}</span>
                </p>
                <p class="p4">
                  <span>小计：</span>
                  <span>{{ tableData.total3 }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="thirdlyColumn">
            <div class="box1">
              <p class="p1">优惠金额</p>
              <p class="p2">{{ tableData.coupon_money_all1 }}</p>
              <div class="bottom">
                <div class="left">
                  <p>
                    <span>免单金额：</span>
                    <span>{{ tableData.free }}</span>
                  </p>
                  <p>
                    <span>手工优惠金额：</span>
                    <span>{{ tableData.manual }}</span>
                  </p>
                  <p>
                    <span>优惠券金额：</span>
                    <span>{{ tableData.coupon_money_ticket }}</span>
                  </p>
                  <p>
                    <span>会员卡赠送金额：</span>
                    <span>{{ tableData.user_give_price }}</span>
                  </p>
                </div>
                <!--   霸王餐金额 -->
                <!-- <div class="right">
                  <p>
                    <span>实体次卡券：</span>
                    <span>{{ tableData.coupon_money_entity }}</span>
                  </p>
                  <p>
                    <span>促销优惠：</span>
                    <span>{{ tableData.coupon_money_promotion }}</span>
                  </p>
                  <p>
                    <span>霸王餐金额：</span>
                    <span>{{ tableData.coupon_money_overlord }}</span>
                  </p>
                  <p>
                    <span>霸王餐个数：</span>
                    <span>{{ tableData.coupon_num_overlord }}</span>
                  </p>
                </div> -->
              </div>
            </div>
            <div class="box2">
              <p class="p1">销卡总额</p>
              <p class="p2">{{ tableData.balance }}</p>
              <!-- <p class="p3" v-if="tableData.balanceData">
                <span> 项目销卡：</span>
                <span>{{ tableData.balanceData.project }}</span>
              </p>
              <p class="p3" v-if="tableData.balanceData">
                <span>产品销卡：</span>
                <span>{{ tableData.balanceData.goods }}</span>
              </p> -->
              <p class="p3">
                <span style="width: 72px">优惠金额：</span>
                <span>{{ tableData.balance_cop }}</span>
              </p>
              <p class="p3">
                <span style="width: 72px">退款金额：</span>
                <span>{{ tableData.balance_return }}</span>
              </p>
              <!-- <p class="p3">
                <span>余额外支付：</span>
                <span>{{ tableData.balance_other }}</span>
              </p> -->
            </div>
            <div class="box3">
              <div>
                <p class="p1">产品销售数量</p>
                <p class="p2">{{ tableData.goods_fate }}</p>
                <p class="p1">项目销售数量</p>
                <p class="p2" style="margin-bottom: 0">
                  {{ tableData.project_fate }}
                </p>
              </div>
              <div>
                <p class="p1">实体卡券数量</p>
                <p class="p2">{{ tableData.coupon_num_entity || 0 }}</p>
                <p class="p1">霸王餐数量</p>
                <p class="p2" style="margin-bottom: 0">
                  {{ tableData.coupon_num_overlord }}
                </p>
              </div>
            </div>
            <div class="box4">
              <div class="left">
                <div>
                  <p class="p1">总单次</p>
                  <p class="p2">{{ tableData.order_num }}</p>
                </div>
                <div>
                  <p class="p1">应存现金</p>
                  <p class="p2">{{ tableData.cash }}</p>
                </div>
                <div>
                  <p class="p1">退卡金额</p>
                  <p class="p2">{{ tableData.return_money }}</p>
                </div>
              </div>
              <div class="left">
                <div>
                  <p class="p1">总客次</p>
                  <p class="p2">{{ tableData.user_num }}</p>
                </div>
                <div>
                  <p class="p1">支出</p>
                  <p class="p2">0.00</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      date: "",
      paging: {
        date_start: "", //姓名
        date_end: "", //开始时间
        store_id: "", //结束时间
      },
      storeList: [],
      tableData: {},
      isExport: false,
    };
  },
  async created() {
    // if (this.$route.path == "/storeSummary") {
      await this.getDate();
      await this.getAllStoreList();
      await this.handleCurrentChange(1);
    // }
  },
  methods: {
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportStoreAchieve(this.paging);
      this.utils.downloadXlsx(res, "门店业绩汇总表");
      this.isExport = false;
    },
    getDate() {
      var date = new Date();
      let date2 = new Date();
      date.setDate(1);
      var dateStart =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      var dateEnd = this.utils.getNowDate(date2, true);
      this.paging.date_start = dateStart;
      this.paging.date_end = dateEnd;
      this.date = [dateStart, dateEnd];
    },
    chageDate(e) {
      this.paging.date_start = e[0];
      this.paging.date_end = e[1];
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
        this.paging.store_id = data[0].id;
      }
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getStoreAchieve(this.paging);
      if (code) {
        // data.dianPing = data.group * 1 + data.reserve * 1;
        // data.actual_payable = data.actual_payable
        //   ? Number(data.actual_payable).toFixed(2)
        //   : "0.00";
        data.orders_payable = data.orders_payable
          ? Number(data.orders_payable).toFixed(2)
          : "0.00";
        data.card = data.card ? Number(data.card).toFixed(2) : "0.00";

        data.wx = data.wx ? Number(data.wx).toFixed(2) : "0.00";
        data.ali = data.ali ? Number(data.ali).toFixed(2) : "0.00";
        data.public = data.public ? Number(data.public).toFixed(2) : "0.00";
        data.praise = data.praise ? Number(data.praise).toFixed(2) : "0.00";
        data.upright = data.upright ? Number(data.upright).toFixed(2) : "0.00";

        data.other = data.other ? Number(data.other).toFixed(2) : "0.00";
        data.wow = data.wow ? Number(data.wow).toFixed(2) : "0.00";
        data.coupon_money = data.coupon_money
          ? Number(data.coupon_money).toFixed(2)
          : "0.00";
        data.balance = data.balance ? Number(data.balance).toFixed(2) : "0.00";
        data.cash = data.cash ? Number(data.cash).toFixed(2) : "0.00";

        data.bank = data.bank ? Number(data.bank).toFixed(2) : "0.00";
        data.entity = data.entity ? Number(data.entity).toFixed(2) : "0.00";
        data.group = data.group ? Number(data.group).toFixed(2) : "0.00";
        data.reserve = data.reserve ? Number(data.reserve).toFixed(2) : "0.00";
        data.applet = data.applet ? Number(data.applet).toFixed(2) : "0.00";

        data.balanceData.project = data.balanceData.project
          ? Number(data.balanceData.project).toFixed(2)
          : "0.00";
        data.balanceData.goods = data.balanceData.goods
          ? Number(data.balanceData.goods).toFixed(2)
          : "0.00";

        data.aliData.project = data.aliData.project
          ? Number(data.aliData.project).toFixed(2)
          : "0.00";
        data.aliData.goods = data.aliData.goods
          ? Number(data.aliData.goods).toFixed(2)
          : "0.00";
        data.aliData.user_price = data.aliData.user_price
          ? Number(data.aliData.user_price).toFixed(2)
          : "0.00";

        data.wxData.project = data.wxData.project
          ? Number(data.wxData.project).toFixed(2)
          : "0.00";
        data.wxData.goods = data.wxData.goods
          ? Number(data.wxData.goods).toFixed(2)
          : "0.00";
        data.wxData.user_price = data.wxData.user_price
          ? Number(data.wxData.user_price).toFixed(2)
          : "0.00";

        data.cashData.project = data.cashData.project
          ? Number(data.cashData.project).toFixed(2)
          : "0.00";
        data.cashData.goods = data.cashData.goods
          ? Number(data.cashData.goods).toFixed(2)
          : "0.00";
        data.cashData.user_price = data.cashData.user_price
          ? Number(data.cashData.user_price).toFixed(2)
          : "0.00";

        data.bankData.project = data.bankData.project
          ? Number(data.bankData.project).toFixed(2)
          : "0.00";
        data.bankData.goods = data.bankData.goods
          ? Number(data.bankData.goods).toFixed(2)
          : "0.00";
        data.bankData.user_price = data.bankData.user_price
          ? Number(data.bankData.user_price).toFixed(2)
          : "0.00";

        data.coupon_money_all = data.coupon_money_all
          ? Number(data.coupon_money_all).toFixed(2)
          : "0.00";
        data.free = data.free ? Number(data.free).toFixed(2) : "0.00";
        data.manual = data.manual ? Number(data.manual).toFixed(2) : "0.00";
        data.coupon_money_ticket = data.coupon_money_ticket
          ? Number(data.coupon_money_ticket).toFixed(2)
          : "0.00";
        data.coupon_money_promotion = data.coupon_money_promotion
          ? Number(data.coupon_money_promotion).toFixed(2)
          : "0.00";
        // data.coupon_money_entity = data.coupon_money_entity
        //   ? Number(data.coupon_money_entity).toFixed(2)
        //   : "0.00";
        data.user_give_price = data.user_give_price
          ? Number(data.user_give_price).toFixed(2)
          : "0.00";
        data.coupon_money_overlord = data.coupon_money_overlord
          ? Number(data.coupon_money_overlord).toFixed(2)
          : "0.00";
        data.cash = data.cash ? Number(data.cash).toFixed(2) : "0.00";
        data.return_money = data.return_money
          ? Number(data.return_money).toFixed(2)
          : "0.00";

        data.balance_cop = data.balance_cop
          ? Number(data.balance_cop).toFixed(2)
          : "0.00";
        data.ali_cop = data.ali_cop ? Number(data.ali_cop).toFixed(2) : "0.00";
        data.wx_cop = data.wx_cop ? Number(data.wx_cop).toFixed(2) : "0.00";
        data.cash_cop = data.cash_cop
          ? Number(data.cash_cop).toFixed(2)
          : "0.00";
        data.bank_cop = data.bank_cop
          ? Number(data.bank_cop).toFixed(2)
          : "0.00";

        data.ali_return = data.ali_return
          ? Number(data.ali_return).toFixed(2)
          : "0.00";
        data.balance_return = data.balance_return
          ? Number(data.balance_return).toFixed(2)
          : "0.00";
        data.bank_return = data.bank_return
          ? Number(data.bank_return).toFixed(2)
          : "0.00";
        data.cash_return = data.cash_return
          ? Number(data.cash_return).toFixed(2)
          : "0.00";
        data.wx_return = data.wx_return
          ? Number(data.wx_return).toFixed(2)
          : "0.00";

        data.total1 =
          data.balanceData.project * 1 +
          data.aliData.project * 1 +
          data.wxData.project * 1 +
          data.cashData.project * 1 +
          data.bankData.project * 1;

        data.total2 =
          data.balanceData.goods * 1 +
          data.aliData.goods * 1 +
          data.wxData.goods * 1 +
          data.cashData.goods * 1 +
          data.bankData.goods * 1;
        data.total3 =
          data.aliData.user_price * 1 +
          data.wxData.user_price * 1 +
          data.cashData.user_price * 1 +
          data.bankData.user_price * 1;

        data.total4 =
          data.ali_cop * 1 +
          data.bank_cop * 1 +
          data.cash_cop * 1 +
          data.balance_cop * 1 +
          data.wx_cop * 1;
        data.total5 =
          data.ali_return * 1 +
          data.balance_return * 1 +
          data.bank_return * 1 +
          data.cash_return * 1 +
          data.wx_return * 1;
        data.total6 =
          data.balance * 1 +
          data.ali * 1 +
          data.wx * 1 +
          data.cash * 1 +
          data.bank * 1;

        data.total1 = Number(data.total1).toFixed(2);
        data.total2 = Number(data.total2).toFixed(2);
        data.total3 = Number(data.total3).toFixed(2);
        data.total4 = Number(data.total4).toFixed(2);
        data.total5 = Number(data.total5).toFixed(2);
        data.total6 = Number(data.total6).toFixed(2);
        // 计算实际收入合计
        let actual_payable =
          data.wx * 1 +
          data.ali * 1 +
          data.public * 1 +
          data.praise * 1 +
          data.upright * 1 +
          data.other * 1 +
          data.wow * 1 +
          data.cash * 1 +
          data.bank * 1 +
          data.card * 1 +
          data.applet * 1;
        data.actual_payable1 = Number(actual_payable).toFixed(2);
        //  计算劳动业绩
        let orders_payable =
          data.wx * 1 +
          data.ali * 1 +
          data.public * 1 +
          data.praise * 1 +
          data.upright * 1 +
          data.other * 1 +
          data.wow * 1 +
          data.cash * 1 +
          data.bank * 1 +
          data.applet * 1 +
          data.balance * 1 +
          data.card * 1 -
          data.total3;
        // 计算优惠金额
        let coupon_money_all =
          data.free * 1 +
          data.manual * 1 +
          data.coupon_money_ticket * 1 +
          data.user_give_price * 1;

        data.orders_payable1 = Number(orders_payable).toFixed(2);
        data.coupon_money_all1 = Number(coupon_money_all).toFixed(2);
        this.tableData = data;
        console.log(this.tableData, "this.tableData");
      }
      this.loading = false;
    },
    reset() {
      this.paging.store_id = this.storeList[0].id;
      this.getDate();
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.groupWrap {
  p,
  h3 {
    margin: 0;
  }
  .thirdlyColumn {
    display: flex;
    justify-content: space-between;
    .box4 {
      width: 29%;
      padding: 37px 0 30px 0;
      display: flex;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      .left {
        padding: 0 67px 0 50px;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        div:nth-child(2) {
          margin: 52px 0 49px 0;
        }
        .p1 {
          color: #333333;
          font-size: 16px;
          margin-bottom: 11px;
        }
        .p2 {
          color: #333333;
          font-size: 26px;
          line-height: 37px;
        }
      }
      .left:last-child {
        border-right: 1px solid transparent;
        padding: 0 44px 0 62px;
      }
    }
    .box3 {
      width: 29%;
      padding: 37px 0 50px 0px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      display: flex;
      div:nth-child(1) {
        padding: 0px 73px 0 52px;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
      }
      div:nth-child(2) {
        padding: 0 46px 0 50px;
      }
      .p1 {
        color: #333333;
        font-size: 16px;
      }
      .p2 {
        color: #333333;
        font-size: 26px;
        margin: 11px 0 81px 0;
        line-height: 37px;
      }
    }
    .box2 {
      width: 19.6%;
      border-radius: 6px;
      background: #fff;
      padding: 37px 0 0 43px;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      .p1 {
        color: #333333;
        font-size: 16px;
      }
      .p2 {
        color: #333333;
        font-size: 26px;
        line-height: 37px;
        margin: 11px 0 16px 0;
      }
      .p3 {
        align-items: center;
        line-height: 30px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        span:nth-child(1) {
          color: #666666;
          font-size: 14px;
          display: inline-block;
          width: 84px;
        }
        span:nth-child(2) {
          color: #333333;
          font-size: 14px;
        }
      }
    }
    .box1 {
      width: 19.6%;
      background: #fff;
      border-radius: 8px;
      padding: 37px 0 0 23px;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      .p1 {
        color: #333333;
        font-size: 16px;
      }
      .p2 {
        color: #333333;
        font-size: 26px;
        margin: 11px 0 16px 0;
        line-height: 37px;
      }
      .bottom {
        display: flex;
        .left {
          margin-right: 62px;
        }
        p {
          display: flex;
          font-size: 14px;
          margin-bottom: 10px;
          line-height: 30px;
          span:nth-child(1) {
            color: #666666;
            display: block;
            width: 116px;
          }
          span:nth-child(2) {
            color: #333333;
          }
        }
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .secondColumn {
    // padding: 20px 0 20px 0;
    padding: 44px 0 30px 24px;
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
    display: flex;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
    justify-content: space-between;
    > div {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .left {
      width: 67%;
      display: flex;
      justify-content: space-between;
      .list {
        width: 27%;
        padding: 0 50px;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        .p1 {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
          span {
            color: #333333;
            font-size: 16px;
          }
        }
        .p2 {
          color: #333333;
          font-size: 26px;
          margin: 15px 0 24px 0;
          line-height: 33px;
        }
        .p3 {
          margin-bottom: 8px;
        }
        .p3,
        .p4 {
          line-height: 30px;
          font-size: 14px;
          display: flex;
          align-items: center;
          span:nth-child(1) {
            width: 87px;
            color: #666666;
          }
          span:nth-child(2) {
            color: #333333;
            // margin-left: 20px;
          }
        }
      }
      .list:nth-child(1) {
        width: 19%;
        padding-left: 0;
        padding-right: 50px;
      }
      .list:nth-child(2) {
        // padding: 0 61px 0 27px;
        .p2 {
          margin-top: 10px;
          margin-bottom: 24px;
        }
      }
    }
    .right {
      width: 31.4%;
      display: flex;
      justify-content: space-between;
      .list {
        width: 50%;
        padding: 0 45px;
        // height: 230px;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        .p1 {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
          span {
            color: #333333;
            font-size: 16px;
          }
        }
        .p2 {
          color: #333333;
          font-size: 26px;
          margin: 15px 0 24px 0;
          line-height: 33px;
        }
        .p3 {
          margin-bottom: 8px;
        }
        .p3,
        .p4 {
          line-height: 30px;
          font-size: 14px;
          display: flex;
          align-items: center;
          span:nth-child(1) {
            width: 87px;
            color: #666666;
          }
          span:nth-child(2) {
            color: #333333;
            // margin-left: 20px;
          }
        }
      }
      .list:last-child {
        border-right: 1px solid transparent;
        // .p2 {
        //   margin-top: 32px;
        // }
        .p3,
        .p4 {
          span:nth-child(1) {
            width: 42px;
          }
          span:nth-child(2) {
            // margin-left: 10px;
          }
        }
      }
    }

    // .list:nth-child(3) {
    //   padding: 0 83px 0 57px;
    // }
    // .list:nth-child(4) {
    //   padding: 0 126px 0 59px;
    // }
    // .list:nth-child(5) {
    //   padding: 0 68px 0 59px;
    // }
  }
  .firstColumn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 67.8%;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      padding: 37px 10px 30px 24px;
      background: #fff;
      border-radius: 8px;
      display: flex;
      .summaryWrap {
        width: 19%;
        padding-right: 50px;
        height: 180px;
        box-sizing: border-box;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        .top {
          margin-bottom: 47px;
        }
        .top,
        .bottom {
          p {
            color: #333333;
            font-size: 16px;
            margin-bottom: 5px;
          }
          h3 {
            color: #333333;
            font-size: 32px;
            line-height: 45px;
            font-weight: 500;
          }
        }
      }
      .listWrap {
        width: 27%;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        padding-left: 50px;
        height: 180px;
        .list {
          p {
            display: flex;
            align-items: center;
            line-height: 30px;
            margin-bottom: 10px;
            span:first-child {
              width: 98px;
              color: #666666;
              font-size: 14px;
              display: block;
            }
            span:last-child {
              color: #333333;
              font-size: 14px;
              display: block;
            }
          }
          p:last-child {
            margin-bottom: 0;
          }
        }
      }
      .listWrap:nth-child(2) {
        padding: 0 50px 0 50px;
      }
      .listWrap:nth-child(3) {
        padding: 0 50px 0 50px;
      }
      .listWrap:last-child {
        border-right: 1px solid transparent;
      }
    }
    .right {
      width: 31.4%;
      border-radius: 8px;
      padding: 46px 0px 30px 0px;
      background: #fff;
      display: flex;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
      .listWrap {
        width: 50%;
        border-right: 1px solid rgba(151, 151, 151, 0.34);
        padding: 0 45px 0 45px;
        .p1 {
          color: #333333;
          font-size: 16px;
        }
        .p2 {
          display: flex;
          margin: 23px 0 20px 0;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 15px;
          }
          span {
            color: #42505c;
            font-size: 32px;
            line-height: 45px;
          }
        }
        .p3 {
          margin-bottom: 15px;
        }
        .p3,
        .p4 {
          display: flex;
          align-items: center;
          line-height: 30px;
          span:first-child {
            color: #666666;
            font-size: 14px;
            display: block;
          }
          span:last-child {
            display: block;
            color: #333333;
            font-size: 14px;
            // margin-left: 6px;
          }
        }
      }
      .listWrap:last-child {
        border-right: 1px solid transparent;
      }
    }
  }
}
.vs-table-box {
  padding: 0;
  background: transparent;
}
.el-form-item {
  margin-bottom: 0;
}
@media screen and (max-width: 1700px) {
  .groupWrap {
    .secondColumn {
      .left {
        .list {
          padding: 0 0 0 30px;
        }
      }
      .right {
        width: 33%;
        .list {
          padding: 0 30px;
        }
      }
    }
    .firstColumn {
      .left {
        .listWrap:nth-child(3) {
          padding: 0 0 0 40px;
        }
        .listWrap:last-child {
          padding: 0 0 0 40px;
        }
      }
    }
    .thirdlyColumn {
      .box3 {
        div:nth-child(1) {
          padding: 0px 50px 0 50px;
        }
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .groupWrap {
    .firstColumn {
      .left {
        width: 72%;
        // padding: 20px 20px 10px 20px;
        .summaryWrap {
          width: 20%;
          // margin-right: 24px;
          padding: 0;
        }
        .listWrap:nth-child(2) {
          padding: 0px 30px;
        }
        .listWrap:nth-child(3) {
          padding: 0px 30px;
        }
        .listWrap {
          padding-left: 30px;
          .list {
            p {
              span:first-child {
                width: 98px;
              }
              span:last-child {
                margin-left: 0px;
              }
            }
          }
        }
      }
      .right {
        width: 27%;
        .listWrap {
          padding: 0 25px;
          .p3,
          .p4 {
            span:last-child {
              margin-left: 5px;
            }
          }
        }
      }
    }
    .secondColumn {
      .left {
        width: 68%;
        .list:first-child {
          width: 21%;
          padding-right: 0px;
        }
        .list {
          padding: 0 20px;
        }
        .list {
          .p3,
          .p4 {
            display: flex;
            align-items: center;
            span:nth-child(2) {
              margin-left: 0px;
            }
          }
        }
      }
      .right {
        width: 32%;
        .list {
          padding: 0 20px;
        }
        .list:last-child {
          padding-left: 40px;
          .p3,
          .p4 {
            display: flex;
            align-items: center;
            span:nth-child(1) {
              display: block;
              width: 43px;
            }
            span:nth-child(2) {
              display: block;
            }
          }
        }
      }

      .list:nth-child(2),
      .list:nth-child(3),
      .list:nth-child(4),
      .list:nth-child(5),
      .list:nth-child(6) {
        padding: 0 20px;
      }
    }
    .thirdlyColumn {
      .box1 {
        width: 19.5%;
        .bottom {
          .left {
            margin-right: 34px;
          }
        }
      }
      .box2 {
        width: 19.5%;
        padding: 37px 0 0 23px;
      }
      .box3 {
        width: 29%;
        div:nth-child(1) {
          padding: 0px 34px;
        }
        div:nth-child(2) {
          padding: 0px 34px;
        }
      }
      .box4 {
        width: 28.8%;
        padding-bottom: 30px;
        .left,
        .left:last-child {
          padding: 0 36px;
        }
      }
    }
  }
}
.vs-search-box {
  padding: 20px;
}
</style>